<template>
	<view>
		<!-- 標題欄和狀態列佔位符 -->
		<!-- <view class="titleNview-placing"> </view> -->
		<sub-tabvs class="" :tabs="typetab" @change="changeTabsIndex" :selectIndex="selecttype" :scrollTop="scrollTop"></sub-tabvs>
		<view v-if="selecttype > 0">
			<home-newrank ref="listNew" :selectIndex="selecttype==2 ? 3 : 0" ></home-newrank>
		</view>
		<view v-if="selecttype==0">
			<view class="home-header pd0_15 mt10">
					<view class="home-mendian flex alcenter space plr15 cl-w9" style="display: none;">
						<navigator style="width: calc(100% - 80rpx);" url="/pages/client/tuan/search">
						<view  class="flex alcenter" style="width: calc(100% - 80rpx);">
							<text class="iconfont  iconsousuo ft14 mr10"></text>
							<text class="text-over ft14" style="width: calc(100% - 60rpx);">{{$t("common.search.placeholder")}}</text>
						</view>
						</navigator>
					</view>
				<view>
					<home-banner :banners="banners"></home-banner>
				</view>
			</view>
			<view class="integral-mall-main plr15" style="margin-top: 30upx;">	
				<view class="mt24" v-if="hotdata[1]">
					<view class="flex alcenter space">
						<view class="flex alcenter">
							<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image>
							<text class="ft16 ftw600 cl-main ml15">{{$t("index.title.hot")}}</text>
						</view>
						<!-- <navigator url="/pages/client/tuan/search?selectIndex=1"> -->
						<view @click="replaceIt()" class="ft14 cl-notice">{{$t("index.title.change")}}</view>
						<!-- </navigator> -->
					</view>
					
					<view class="mt16 flex space">
						<block v-for="(value,key) in hotdata" :key="key" v-if="key>=hyh && key<hyh+3">
						<view class="box pb10" style="width:31%; position: relative; border-radius:20rpx;" @click="openDetailPage(value.id,0)">
							<!-- <view class="btn-mini" style="position: absolute; top: 20upx; right: 20upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view> -->
							<image :lazy-load="true" class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
							<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{value.name}}</view>
						</view>
						</block>	
				
					</view>
					
				</view>	
				<view class="mt24" v-if="givedata[3]">
					<view class="flex alcenter space">
						<view class="flex alcenter">
							<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[2]"></image>
							<text class="ft16 ftw600 cl-main ml15">{{$t("index.title.rank")}}</text>
						</view>
						<navigator url="/pages/client/tuan/search?selectIndex=3">
              <view class="ft14 cl-notice">TOP3</view>
						</navigator>
					</view>
					<view class="mt16 flex space">
						<block v-for="(value,key) in givedata" :key="key" v-if="key<3">
						<view class="box pb10" style="width:31%; position: relative; border-radius:20rpx;" @click="openDetailPage(value.id,0)">
              <image :lazy-load="true" class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
              <view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{value.name}}</view>
						</view>
						</block>				
					</view>		
				</view>
			</view>	
			<home-default :datasa="datasa"></home-default>
      <com-copyright></com-copyright>
			<!-- <com-footer model="index"></com-footer> -->
		</view>
    
    <uni-popup ref="guideModal">
      <view class="guide-box" @click="closeGuideModal">
        <image v-if="platform == 'ios'" class="fb-ios" src="@/static/img/guide/fb_ios.png" />
        <image v-if="platform == 'android'" class="fb-and" src="@/static/img/guide/fb_and.png" />
      </view>
    </uni-popup>
	</view>
</template>
<script>
  import { isOnFacebookApp } from '@/utils/ua'
	export default{
		data(){
			return {
				hyh:0,
				navLock:false,
				datasa:[],
				listjq:[],
				// listWeekHot:[],
				showdyxx:true,
				dataconfig:[],
				banners:[],
				datainfo:[],
				dataindex:[],
				hotdata:[],
				givedata:[],
				
				typetab:[
					{name: this.$t("index.tab.recommend"), id:1},
					{name: this.$t("index.tab.new"), id:2},
					{name: this.$t("index.tab.rank"), id:3},
				],
				selecttype:0,
				scrollTop:0,
				type:1,
				
				mbgColor:this.$mbgColor,
			}
		},
    computed: {
      isOnFaceBook() {
        return isOnFacebookApp()
      },
      platform () {
        const platform = uni.getSystemInfoSync().platform
        return platform
      }
    },
		onPageScroll(e){
			if(e.scrollTop > 44){
				if(this.navLock == false){
					this.navLock = true;
					uni.setNavigationBarColor({
						frontColor:"#000000",
						backgroundColor:"#FFFFFF",
						complete:()=>{
							this.navLock = false;
						}
					});
				}
			}else{
				if(this.navLock == false){
					this.navLock = true;
					let this_=this
					uni.setNavigationBarColor({
						frontColor:"#000000",
						backgroundColor:this_.mbgColor,
						complete:()=>{
							this.navLock = false;
						}
					});
				}
			}
		},
		onShow() {
			this.getList();
			let this_=this
		},
    onLoad(e) {
      setTimeout(this.initGuideForCollection, 500)
    },
		methods:{
      initGuideForCollection () {
        const that = this
        const guideStatus = uni.getStorageSync('guideStatus')
        if (guideStatus == 1) {
          return false
        }
        if (that.isOnFaceBook) {
          that.$refs.guideModal.open()
        }
      },
      closeGuideModal () {
        this.$refs.guideModal.close();
        uni.setStorageSync('guideStatus', 1)
      },
			changeTabsIndex(index){
				if(this.typetab[index].id){
					this.type=this.typetab[index].id
				}
				this.selecttype = index;
			},
      // 换一换
			replaceIt(){
				if(this.hyh<12){
					this.hyh=this.hyh+3
				}
				if(this.hyh>=12){
					this.hyh=0
				}
			},
			getList() {
				let this_=this
				let data = {};
				uni.request({
					url: this.configs.apiUrl+'/api/video/indexdata',
					data: data,
					success: data => {
						//console.log(data.data)
						uni.setStorage({//快取配置資訊
							key: 'config',  
							data: data.data.config
						})
						this.banners=data.data.config.banner
						if(data.data.config.name){
							uni.setNavigationBarTitle({
							    title: data.data.config.name
							});
						}
						if(data.data.config.mbgColor){
							this.mbgColor=data.data.config.mbgColor
							uni.setNavigationBarColor({
								frontColor:"#000000",
								backgroundColor:this_.mbgColor,
								complete:()=>{
									this.navLock = false;
								}
							});
						}
						// this.listWeekHot=data.data.listbz
						this.listjq=data.data.listjq
						this.datasa=data.data.new
						this.hotdata=data.data.hotdata
						this.givedata=data.data.givedata
					},
					fail: (data, code) => {
					}
				});
			},
			openDetailPage(vid, mid){
				var fxpid=1
				if(uni.getStorageSync("userinfo")){
					 fxpid=uni.getStorageSync("userinfo").id
				}
				uni.navigateTo({
					url:'/pages/client/tuan/detail?vid='+vid+'&mid='+mid+'&fxpid='+fxpid
				})
			},
		},
	}
</script>

<style>
	.home-header{
		/* height: 300rpx; */
		width: 100%;
		position: relative;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}
	.home-main{
		width: 100%;
		position: relative;
		margin-top: -156rpx;
		padding: 0 30rpx;
	}
	.home-mendian{
		width: 100%;
		height: 84rpx;
		background:rgba(255,255,255,0.1);
		border-radius: 42rpx;
	}
	.integral-mall-header{
		position: relative;
		height: 320rpx;
	}
	.integral-mall-header .bg{
		width: 100%;
		height: 320rpx;
	}
	.integral-mall-header .main{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 320rpx;
	}
	.swiper-integral{
		height: 32rpx;
		width: 100%;
	}
	.integral-mall-main{
		position: relative;
		/* margin-top: -104rpx; */
	}
	.integal-mall-menu{
		width: 100%;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.integral-tuan-l{
		width: 100%;
		height: 280rpx;
		background: #f2f2f2;
		border-radius: 16rpx;
	}
	
	
	.integral-mall-coupon{
		background: #FFFFFF;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}
	.integral-mall-coupon  .top{
		padding: 0rpx 0rpx 24rpx 0rpx;
		border-bottom: 2rpx dashed #FEC675;
	}
	.integral-mall-coupon  .y-l,.integral-mall-coupon  .y-r{
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #F5F6FA;
		position: absolute;
		z-index: 2;
		top: 284rpx;
	}
	.integral-mall-coupon  .y-l{
		left: -10rpx;
	}
	.integral-mall-coupon  .y-r{
		right: -10rpx;
	}
	.integral-mall-coupon   .coupon-value{
		width: 100%;
	}
	.integral-mall-coupon  .coupon-value image{
		width: 100%;
	}
	.integral-mall-coupon  .coupon-value .num{
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
	}
	.integral-mall-goods{
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		border-radius: 16upx;
	}
	.titleNview-placing {
		height: var(--status-bar-height);
		padding-top: 44px;
		box-sizing: content-box;
	}
  
  .guide-box {
    width: 100vw;
    height: 100vh;
  }
  
  image.fb-ios {
    position: absolute;
    top: 10rpx;
    right: 0;
    width: 750rpx;
    height: 576rpx;
  }
  
  image.fb-and {
    position: absolute;
    bottom: 50rpx;
    right: 34rpx;
    width: 686rpx;
    height: 678rpx;
  }
</style>